<!--
/**
* Author: gaohui
* Date: 2023-03-01 10:33
* Desc: ChangeThemeColor 修改主题颜色
*/
-->

<template>
  <title-line title="修改页面主题颜色" />
  <div class="mt10">
    <el-button @click.stop="ChangeThemeColor">修改主题颜色</el-button>
    <el-button @click.stop="resetPageColor">还原主题颜色</el-button>
  </div>
</template>

<script name="ChangeThemeColor" lang="ts" setup>
import { ref } from "vue";

const baseColorArr = [
  "#3CD7D7",
  "#F9CB28",
  "#A089FF",
  "#5CC4FF",
  "#FF9292",
  "#5CC4FF",
  "#FF8AEC",
  "#FFB35B",
];

const index = ref(0);

const ChangeThemeColor = () => {
  const length = baseColorArr.length;
  if (index.value < length) {
    index.value += 1;
  } else {
    index.value = 0;
  }
  setPageColor(baseColorArr[index.value]);
};

const resetPageColor = () => {
  setPageColor("#fff");
};

const setPageColor = (color: string) => {
  const node = document.documentElement;
  node.style.setProperty("--main-color", color);
};
</script>
<style lang="scss" scoped></style>
